<!-- 修改核酸检测登记人员 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">

			<view class="nl-flex-list" @click="selectFloor()">
				<text class="nl-margin-right">选择楼栋</text>
				<view :class="floorName ? 'right':'right-grey'">
					{{floorName ? floorName : '请选择楼栋'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list" @click="selectUnit()">
				<text class="nl-margin-right">选择单元</text>
				<view :class="unitNum ? 'right':'right-grey'">
					{{unitNum ? unitNum : '请选择单元'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list" @click="selectRoom()">
				<text class="nl-margin-right">选择房屋</text>
				<view :class="roomNum ? 'right':'right-grey'">
					{{roomNum ? roomNum : '请选择房屋'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">姓名</text>
				<u-input class="input" v-model="userName" type="text" placeholder="请输入用户姓名" />
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">电话</text>
				<u-input class="input" v-model="tel" type="number" placeholder="请输入用户电话" />
			</view>

			<view class="button-lg" @click="editRegister()">
				<button>确认修改</button>
			</view>
		</view>

		<u-picker mode="selector" v-model="floorShow" :default-selector="[0]" :range="floorList" @confirm="confirmFloor"
			range-key="floorName"></u-picker>

		<u-picker mode="selector" v-model="unitShow" :default-selector="[0]" :range="unitList" @confirm="confirmUnit"
			range-key="unitNum"></u-picker>

		<u-picker mode="selector" v-model="roomShow" :default-selector="[0]" :range="roomList" @confirm="confirmRoom"
			range-key="roomNum"></u-picker>
			
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getRoomInfomartion
	} from "@/api/room.js"
	import {
		getQueryFloors,
		getQueryUnits
	} from "@/api/common"
	import {
		mapState
	} from 'vuex';
	import {
		updateNucleicUser,
	} from '@/api/nucleic.js';
	export default {
		data() {
			return {
				id:'',
				floorList: [],
				floorId: '',
				floorName: '',
				floorShow: false,

				unitList: [],
				unitId: '',
				unitNum: '',
				unitShow: false,

				roomList: [],
				roomId: '',
				roomNum: '',
				roomShow: false,

				layerNum: [],

				userName: '',
				tel: '',

				addShow: false,
			}
		},
		onShow() {},
		onLoad(option) {
			console.log('option', option)

			let data = JSON.parse(option.data)
			this.id = data.id
			this.floorId = data.floorId
			this.floorName = data.floorName
			this.unitId = data.unitId
			this.unitNum = data.unitNum
			this.userName = data.userName
			this.tel = data.tel
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			/**
			 * 楼栋
			 */
			selectFloor() {
				this.queryFloor()
			},
			queryFloor() {
				let params = {
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 100
				}
				getQueryFloors(params).then((res) => {
					this.floorList = res.apiFloorDataVoList
					this.floorShow = true
				}).catch(function(reason) {

				})
			},
			confirmFloor(e) {
				let i = e[0]
				this.floorName = this.floorList[i].floorName
				this.floorId = this.floorList[i].floorId

				this.unitList = []
				this.unitId = ''
				this.unitNum = ''
			},
			/**
			 * 单元
			 */
			selectUnit() {
				if (!this.floorName) {
					uni.showToast({
						title: "请选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}

				this.queryUnit()
			},
			queryUnit() {
				let params = {
					communityId: this.userCommunity.communityId, //小区编号
					floorId: this.floorId,
					name: '',
					page: 1,
					row: 100
				}
				getQueryUnits(params).then((res) => {
					this.unitList = res
					this.unitShow = true
				}).catch(function(reason) {

				})
			},
			confirmUnit(e) {
				let i = e[0]
				this.unitNum = this.unitList[i].unitNum
				this.unitId = this.unitList[i].unitId
			},
			/**
			 * 房屋
			 */
			selectRoom() {
				if (!this.unitNum) {
					uni.showToast({
						title: "请选择单元",
						icon: 'none',
						duration: 1500
					})
					return
				}

				this.queryRoom()
			},
			queryRoom() {
				uni.showLoading({
					title: '加载房屋中',
					mask: true
				});
				let params = {
					communityId: this.userCommunity.communityId,
					floorId: this.floorId,
					unitId: this.unitId,
					page: 1,
					row: 999,
				}
				getRoomInfomartion(params).then((res) => {
					if (res.total > 0) {
						this.roomList = res.rooms
						this.roomShow = true
						uni.hideLoading()
					} else {
						uni.showToast({
							title: "该单元暂无房屋",
							icon: 'none',
							duration: 1500
						})
						return
					}

				}).catch(function(reason) {

				})
			},
			confirmRoom(e) {
				let i = e[0]
				this.roomNum = this.roomList[i].roomNum
				this.roomId = this.roomList[i].roomId

				for (let n = 0; n < Number(this.roomList[i].layerCount); n++) {
					this.layerNum.push(n + 1)
				}
			},
			/**
			 * 修改核酸检测人员
			 */
			editRegister() {
				this.$refs.uToast.show({
					title: '修改中，请稍等',
					type: 'default',
					icon: false
				})

				let parmas = {
					id:this.id,
					roomId: this.roomId,
					userName: this.userName,
					tel: this.tel,
				}

				updateNucleicUser(parmas).then((res) => {
					if (res.code == 0) {
						
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
						})
						
					} else if (res.code == 404) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				}).catch(function(reason) {

				})
			},
			/**
			 * 返回
			 */
			addCancel() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">

</style>